<template>
  <div class="forget">
      <div class="headline">
          <h2>忘记密码</h2>
      </div>
      <div class="action">
           <input class="mint-field-core" maxlength="11" placeholder="请输入手机号" type="tel" v-model="form.tel">
           <div class="input-code">
               <input class="mint-field-core" placeholder="验证码"  type="text" v-model="form.code">
               <mt-button class="main-bgc" @click="getCode" :disabled = "disableds" type="default">{{hint}}</mt-button>
           </div>
           <input class="mint-field-core" maxlength="15" placeholder="密码" type="password" v-model="form.password">
           <mt-button :class="confirm" @click="submit" type="default">确定</mt-button>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                tel: '',
                code: '',
                password: ''
            },
            hint: '获取验证码',
            disableds: false,
            confirm: 'confirm'
        }
    },
    updated() {
        if (this.form.tel && this.form.code && this.form.password) {
            this.confirm = 'success'
        } else {
            this.confirm = 'confirm'
        }
    },
    methods: {
        // 获取验证码
        getCode() {
            let flag = false
            if (flag) return false
            let i = 60
            let type = {
                type: 1,
                tel: this.form.tel
            }
            let types = {
                type: 2,
                tel: this.form.tel
            }
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return alert('请输入正确的手机号')
            }
            // 判断手机号是否被注册
            let countDown
            this.utils.$get(
                this.utils.GET_USERTEL,
                data => {
                    // 发送验证码
                    console.log(data, '怕不是要完蛋')
                    this.utils.$post(
                        this.utils.GET_USERSMS,
                        data => {
                            if (data.code != 0) return alert(data.msg)
                            countDown = setInterval(() => {
                                this.disableds = true
                                i--
                                this.hint = i + 's'
                                if (i <= 0) {
                                    this.disableds = false
                                    this.hint = '获取验证码'
                                    clearInterval(countDown)
                                }
                            }, 1000)
                            this.flag = true
                        },
                        types
                    )
                },
                type
            )
        },
        // 修改密码
        submit() {
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return alert('请输入正确的手机号')
            }
            if (!/^[0-9]*$/.test(this.form.code)) {
                return alert('请输入正确的验证码')
            }
            if (!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)) {
                return alert('请输入正确的密码')
            }
            this.utils.$post(
                this.utils.SET_PASSWORD,
                data => {
                    if (data.code != 0) return alert(data.msg)
                    alert('修改成功')
                    this.$router.push({ path: '/login' })
                },
                this.form
            )
        }
    }
}
</script>

<style lang="less">
@mainColor: #00d8c9;
.forget {
    padding: 0 0.6rem;
    .action {
        .mint-field-core {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #e5e5e5;
            color: #333;
            font-size: 0.28rem;
            padding-bottom: 0.16rem;
            padding-left: 0.2rem;
            &:focus {
                border-bottom: 1px solid @mainColor;
            }
        }
        .input-code {
            margin: 0.8rem 0 0.8rem;
            position: relative;
            height: 0.6rem;
            .main-bgc {
                position: absolute;
                background-color: @mainColor;
                color: #fff;
                font-size: 0.24rem;
                border-radius: 50px;
                width: 2rem;
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                bottom: 0.16rem;
                right: 0;
            }
        }
        .confirm {
            margin-top: 1rem;
            width: 100%;
            background-color: #d9d9d9;
            color: #fff;
            line-height: 0.8rem;
            height: 0.8rem;
            border-radius: 50px;
        }
        .success {
            margin-top: 1rem;
            width: 100%;
            background-color: @mainColor;
            color: #fff;
            line-height: 0.8rem;
            height: 0.8rem;
            border-radius: 50px;
        }
    }
}
</style>
